<template>
  <el-row>
    <el-col :span="3">Ingresses</el-col>
    <el-col :span="3">{{ filterTableData.length }} Items</el-col>
    <el-col :span="6">
      <NamespaceDropDown ref="namespaceDropdown"></NamespaceDropDown>
    </el-col>
    <el-col :span="6">
      <el-input
        v-model="queryString"
        placeholder="查询内容"
        name="queryString"
        clearable
        @keyup.enter.native="query"
      ></el-input>
    </el-col>
    <el-col :span="6">
      <el-select
        v-model="hasException"
        filterable
        placeholder="是否有异常"
        :fit-input-width="true"
        :clearable="true"
        style="width: 100%"
        @change="query"
      >
        <el-option key="1" label="有" value="1"></el-option>
        <el-option key="0" label="无" value="0"></el-option>
      </el-select>
    </el-col>
  </el-row>
  <el-row>
    <el-table
      :data="filterTableData"
      border
      style="width: 100%"
      max-height="550px"
      v-loading="loading"
    >
      <el-table-column prop="metadata.name" label="name" width="150" sortable>
        <template #default="scope">
          <a
            style="cursor: pointer; color: red"
            @click.native="openItemAsYaml(scope.row, 'Ingress')"
            >{{ scope.row.metadata.name }}</a
          >
        </template>
      </el-table-column>
      <el-table-column prop="metadata.namespace" label="namespace" width="100" sortable/>

      <el-table-column label="loadBalancers" width="120">
        <template #default="scope">{{
          to_loadBalancers(scope.row.status.loadBalancer.ingress)
        }}</template>
      </el-table-column>
      <el-table-column label="rules" width="300">
        <template #default="scope">{{ to_rules(scope.row) }}</template>
      </el-table-column>
      <el-table-column label="rules" width="300">
        <template #default="scope">{{ to_rules(scope.row) }}</template>
      </el-table-column>
      <el-table-column label="exception" width="120">
        <template #default="scope">{{ exceptionString(scope.row) }}</template>
      </el-table-column>
    </el-table>
  </el-row>

  <div class="mydialog">
    <el-dialog v-model="yamlVisible" :fullscreen="true">
      <el-tabs type="border-card">
        <el-tab-pane label="Yaml">
          <YamlEdit ref="yamlEdit"></YamlEdit>
        </el-tab-pane>
        <el-tab-pane label="Info">Info</el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>
<script>
import { ref, nextTick } from "vue";
import { TableMixins } from "@/mixins/TableMixins";
import NamespaceDropDown from "@/components/k8s/NamespaceDropDown.vue";
import emitter from "@/eventbus";
export default {
  name: "IngressList",
  props: {},
  mixins: [TableMixins],
  components: { NamespaceDropDown },
  data() {
    return {
      tableData: [],
      loading: false,
      namespaces: [],
      queryString: "",
      yamlVisible: false,
      hasException: "",
    };
  },
  mounted() {
    this.query();
    emitter.on("query_namespaces", (newValue) => {
      this.namespaces = newValue;
    });
  },
  computed: {
    filterTableData() {
      var ret = this.tableData
        .filter(
          (t) =>
            this.namespaces.length == 0 || this.namespaces.includes(t.metadata.namespace)
        )
        .filter((t) => t.metadata.name.includes(this.queryString));

      if (this.hasException == "1") {
        ret = ret.filter((t) => this.exceptionString(t) != "");
      }
      if (this.hasException == "0") {
        ret = ret.filter((t) => this.exceptionString(t) == "");
      }

      return ret;
    },
  },
  methods: {
    async getItems() {
      let items = await window.k8s_GetIngresses("");
      //console.log(items)
      return items;
    },
    to_loadBalancers(loadBalancers) {
      if (!loadBalancers) return "";
      var ls = [];

      for (var i = 0, s = loadBalancers.length; i < s; i++) {
        ls.push(loadBalancers[i].ip);
      }
      return ls.join("\n");
    },
    to_rules(ingress) {
      if (!ingress.spec.rules) return "";

      var ls = [];
      for (var i = 0, s = ingress.spec.rules.length; i < s; i++) {
        var host = "";
        if (ingress.spec.rules[i].host && ingress.spec.rules[i].host != "") {
          host = ingress.spec.rules[i].host;
        } else {
          host = "*";
        }

        var protocol = "http";
        if (ingress.spec.tls) {
          protocol = "https";
        }

        if (ingress.spec.rules[i].http) {
          var paths = ingress.spec.rules[i].http.paths;
          if (paths && paths.length > 0) {
            for (var j = 0, l = paths.length; j < l; j++) {
              ls.push(
                protocol +
                  "://" +
                  host +
                  paths[j].path +
                  "->" +
                  paths[j].backend.serviceName +
                  ":" +
                  paths[j].backend.servicePort
              );
            }
          }
        }
      }

      return ls.join("\n");
    },
    exceptionString(row) {
      if (!row.spec.tls || row.spec.tls.length == 0) {
        return "没有设置tls证书";
      }
      for (var i = 0, s = row.spec.tls.length; i < s; i++) {
        if (!row.spec.tls[i].secretName) {
          return "没有设置tls证书secret名";
        }
      }
      if (row.spec.rules && row.spec.rules.length > 0)
        for (var i = 0, s = row.spec.rules.length; i < s; i++) {
          let rule = row.spec.rules[i];
          if (!rule.host || rule.host == "") {
            return "存在路由规则没有设置域名";
          }
        }
      return "";
    },
  },
};
</script>
<style scoped>
/*弹出框高度样式调整*/
.mydialog :deep() .el-dialog__body {
  overflow: auto;
  height: 80vh;
}

.mydialog :deep() .el-tabs--border-card {
  height: 70vh;
}
.mydialog :deep() .el-tabs__content {
  height: 70vh;
}
.mydialog :deep() .el-tabs__content .el-tab-pane {
  height: 70vh;
}
</style>
